<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <input type="button" value="加载user" onclick="sendAjax1()">
    <input type="button" value="加载user" onclick="sendAjax2()">
    <script>
       /*  
       请求状态正常-获取请求响应数据
        xhr.responseText返回响应的文本数据
        通过事件load ， XMLHttpRequest 请求成功完成时触发该事件监听。也可以使用 onload 属性替代
            1.如果请求未发送，则返回""
            2.如果请求成功，但在响应完成之间进行调用，则返回""
            3.如果请求成功，并且响应完成之后进行调用，将返回服务器响应数据 */

        function sendAjax1(){
            let xhr=new XMLHttpRequest();
            console.log(xhr.responseText);
            xhr.open("get","/user");
            xhr.onload=function(){
                console.log("最终结果:",xhr.responseText)
            };
            xhr.send();
            console.log(xhr.responseText);

        }

       /*  请求状态异常-监控异常状态
        1.异常1：网络错误(请求无法正常发送) 
        事件error ， 在请求过程中，若发生NetWork error（请求根本无法完成发送），则会触发此事件，也可以使用 onerror 属性替代
        注意：只有发生了网络层级别异常才会触发此事件，对于应用层级别的异常不会触发error事件，而是触发load事件
        2.异常2：应用层逻辑异常(04.ajax状态监控)
        
        
        */
        function sendAjax2(){
            let xhr=new XMLHttpRequest();
            
            xhr.open("get","/serviceError");
            xhr.onload=function(){
                console.log("触发了load");
                console.log("最终结果:",xhr.responseText)
            };
            xhr.onerror=function(){
                console.log("请求未发送成功");
            };
            xhr.send();
          

        }
   </script>
</body>
</html>